{{--编辑区域--}}
<div class="card" v-if="editing">
    <div class="card-body">
        <div class="card-title">
            <div class="level">
                <input type="text" class="form-control" v-model="form.title">
            </div>
        </div>
        <hr>
        <div class="card-text">
            <div class="form-group">
                <textarea class="form-control" rows="10" v-model="form.body"></textarea>
            </div>
        </div>
    </div>
    <footer class="card-footer">
        <div class="level">
            <button class="btn btn-sm level-item" @click="editing = true" v-show="! editing">Edit</button>
            <button class="btn btn-primary btn-sm level-item" @click="update">Update</button>
            <button class="btn btn-sm level-item" @click="resetForm">Cancel</button>

            @can('update',$thread)
                <form action="{{ $thread->path() }}" method="POST" class="ml-a">
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}

                    <button type="submit" class="btn btn-link">Delete Thread</button>
                </form>
            @endcan
        </div>
    </footer>
</div>
{{--视图区域--}}
<div class="card" v-else>
    <div class="card-body">
        <div class="card-title">
            <div class="level">
                <img src="/{{ $thread->creator->avatar_path }}" alt="{{ $thread->creator->name }}"
                     width="25" height="25" class="mr-1">
                <span class="flex">
                                    <a href="{{ route('profile',$thread->creator) }}">{{ $thread->creator->name }}
                                    <span v-text="title"></span></a>

                                </span>
                @can('update',$thread)
                    <form action="{{ $thread->path() }}" method="POST">
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}

                        <button type="submit" class="btn btn-link">Delete Thread</button>
                    </form>
                @endcan
            </div>
        </div>
        <hr>
        <div class="card-text" v-text="body">
        </div>
    </div>
    <footer class="card-footer" v-if="authorize('owns',thread)">
        <button class="btn btn-sm" @click="editing = true">Edit</button>
    </footer>

</div>